<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>test-1</title>
    <style>
        html,
        body,
        ul,
        p {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #333;
        }

        ul {
            list-style: none;
        }

        .map {
            width: 450px;
            height: 450px;
            margin: 50px auto;
            position: relative;
        }

        .map ul {
            width: 450px;
            height: 450px;
            background-color: #ccc;
        }

        .map ul li {
            width: 126px;
            height: 126px;
            padding: 10px;
            border: 2px solid #333;
            position: absolute;
        }

        .map ul li:nth-child(1) {
            left: 0px;
            top: 0px;
        }

        .map ul li:nth-child(2) {
            left: 150px;
            top: 0px;
        }

        .map ul li:nth-child(3) {
            left: 300px;
            top: 0px;
        }

        .map ul li:nth-child(4) {
            left: 300px;
            top: 150px;
        }

        .map ul li:nth-child(5) {
            left: 300px;
            top: 300px;
        }

        .map ul li:nth-child(6) {
            left: 150px;
            top: 300px;
        }

        .map ul li:nth-child(7) {
            left: 0px;
            top: 300px;
        }

        .map ul li:nth-child(8) {
            left: 0;
            top: 150px;
        }

        .map ul li:nth-child(9) {
            left: 150px;
            top: 150px;
        }

        .map ul li a {
            width: 126px;
            display: block;
            color: #333;
            text-decoration: none;
            text-align: center;
        }

        .map ul li a p {
            font-size: 12px;
        }

        .map ul li button {
            width: 126px;
            height: 126px;
            cursor: pointer;
            border-radius: 50%;
            outline: none;
            border: 0;
        }

        .txt {
            display: none;
            font-size: 30px;
        }

        .map ul li.active {
            border: 2px solid orange;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #startButton {
            width: 126px;
            height: 126px;
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            border: 1px solid #ccc;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="map">
            <ul>
                <li class="active">
                    <a href="">
                        <img src="./images/lottery_01.png" alt="">
                        <p>京东卡</p>
                        <p>10元</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_02.png" alt="">
                        <p>京东卡</p>
                        <p>20元</p>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_03.png" alt="">
                        <p>京东卡</p>
                        <p>30元</p>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_04.png" alt="">
                        <p>京东卡</p>
                        <p>100元</p>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_05.png" alt="">
                        <p>谢谢参与</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_06.png" alt="">
                        <p>京东卡</p>
                        <p>200元</p>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/lottery_07.png" alt="">
                        <p>京东卡</p>
                        <p>500元</p>

                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="./images/lottery_08.png" alt="">
                        <p>iQOO Pro</p>
                        <p>手机</p>
                    </a>
                </li>
            </ul>
            <div>
                <button id="startButton">抽奖</button>
            </div>
        </div>
    </div>

</body>

</html>

<script>
    // 需求：
    //  定义一个Game构造函数 （2分）
    //  在构造函数里添加程序所需要属性  （10分）
    //  高亮的边框至少绕着按钮转3圈，然后才能选择奖品（10分）
    //  在原型对象上添加所需的方法，例如产生指定范围的随机数（3分）
    //  点击"抽奖"按钮 ， 开始随机抽奖，高亮的边框，依次顺时针在奖品上切换，并设置按钮的文本为“进行中..”（15分）
    //  抽奖结束，提示中奖结果，重置显示"抽奖" （10分）


    // 编码：
    function Game() {
        this.elements = document.querySelectorAll(".map ul li");
        this.startButton = document.querySelector("#startButton");
        this.len = this.elements.length;
        this.count = 0;
        this.num = 0;
        this.index = 0;
        this.timer = null;
    }
    Game.prototype.random = function (min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    Game.prototype.run = function () {
        for (var i = 0; i < this.len; i++) {
            this.elements[i].className = "";
        }
        this.elements[this.index].className = "active";
    }
    Game.prototype.play = function () {
        var _this = this;
        var minV = (this.len - 1) * 3;
        var maxV = (this.len - 1) * 6;
        var randomNumber = this.random(minV, maxV);
        this.timer = setInterval(function () {
            _this.num++;
            _this.index++;
            if (_this.index > _this.len - 1) {
                _this.count++;
                _this.index = 0;
                console.log("执行了第" + (_this.count) + "圈");
            }
            if (_this.count > 3 && _this.num == randomNumber) {
                clearInterval(_this.timer);
                _this.startButton.innerText = "继续";
                _this.count = 0;
                _this.num = 0;
                console.log(_this.elements[_this.index].querySelector("p:last-child").innerText);
            }
            _this.run();
        }, 100)
    }

    Game.prototype.init = function () {
        // 记录当前函数作用域的this
        var _this = this;
        // 点击事件
        this.startButton.onclick = function () {
            // 使用定时器函数 先清除定时器函数
            clearInterval(_this.timer);
            // 设置文本
            _this.startButton.innerText = "进行中..."
            // 开始抽奖
            _this.play();
        }
    }

    // 创建构造函数的实例 并调用初始化函数
    new Game().init();

</script>